<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="content">
        <table border="1">
            <thead class="thead">
                <tr>
                    <th>全选<input type="checkbox" name="" class="check-all"></th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tr>
                <td>总计</td>
                <td></td>
                <td></td>
                <td><span class="total-num"></span>件</td>
                <td><span class="total-price"></span>元</td>
            </tr>
        </table>
    </div>
    <script src="./js/data.js"></script>
    <script src="./js/jq.js"></script>

    <script>
        $(function() {

            // 购物车中的数据 保证类型是数组，可以是空数组但不能是null
            var cartList = JSON.parse(localStorage.getItem('cartList')) || [];
            var cartGoods = []

            window.onload = function() {
                // 根据id获取购物车中的数据
                getDataById();
                // 计算金额和数量
                getTotal()

            }

            function getDataById() {
                if (cartList.length) {
                    // 购物车中有内容
                    $.each(cartList, function(i, item) {
                        // 这个item是购物车中存的id
                        console.log(item);
                        $.each(goodsList, function(num, goods) {
                            // 选择购物车中的商品，存入数组
                            if (goods.id == item) {
                                goods.num = 1; // 每个商品默认数量是1
                                goods.isChecked = false; // 默认每个商品都不勾选
                                // goods.price = goods.price * 10000;
                                cartGoods.push(goods)
                            }
                        })
                    })
                    console.log(cartGoods);
                    // 渲染页面
                    renderTable(cartGoods)
                } else {
                    // 购物车为空
                    var content = '<tr><td colspan=5>购物车为空,买买买！</td></tr>';
                    $('.thead').after(content);
                }
            }

            function renderTable(data) {
                var content = '';
                $.each(data, function(i, item) {
                        content += "<tr><td><input type=checkbox class=check-item></td>" +
                            "<td>" + item.name + "</td>" +
                            "<td>" + item.price + "</td>" +
                            "<td>" + item.num + "</td>" +
                            "<td>" + item.num * item.price + "</td>" +
                            "</tr>"
                    })
                    // console.log(content);
                $('.thead').after(content);
            }

            // 通过jq获取多选框的值
            // 全选分成两步，写两个函数：1。点击全选按钮，获取他的状态，分配给每件商品（遍历）
            // 2.点击每一件商品前面的按钮，遍历每一件商品，如果都是true 就让check-all也是true；如果有false，check-all就也是false
            $('.check-all').change(function() {
                // 先获取当前框是否选中---是否要全选
                let flag = this.checked;
                // 修改数据，每个商品的状态和全选的框状态一致
                $.each(cartGoods, function(i, item) {
                        item.isChecked = flag;
                    })
                    // 修改页面
                $.each($('.check-item'), function(i, item) {
                    item.checked = flag
                })
                getTotal()
            })

            // 点击每一件商品前面的按钮,要遍历所有的商品--进而影响第一行那个全选的值
            $('.content').on('change', '.check-item', function() {
                var isAll = false;
                var arr = [];
                $.each($('.check-item'), function(i, item) {
                    // 修改数据
                    cartGoods[i].isChecked = item.checked;
                    arr.push(item.checked)
                })
                isAll = arr.every(function(a) {
                    return a
                });
                // 勾选全选的框
                $('.check-all').prop('checked', isAll);
                getTotal()
            })

            // 计算金额和数量 给每隔个商品加一条数据，用来表示是否勾选isChecked
            function getTotal() {
                var totalNum = 0;
                var totalPrice = 0;
                cartGoods.map(function(item, index) {
                    if (item.isChecked) {
                        totalNum += item.num;
                        totalPrice += item.num * item.price;
                    }
                    totalPrice = totalPrice;
                })
                $('.total-num').html(totalNum);
                $('.total-price').html(totalPrice);
            }
        })
    </script>
</body>

</html>